<template>
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    :immediate-check="false"
    @load="onLoad"
  >
    <CommentItem
    @reoly-click="$emit('reoly-click',$event)"
      v-for="item in list"
      :key="item.art_id"
      :comment="item"
    />
  </van-list>
</template>

<script>
import { getComments } from '@/api/comment.js'
import CommentItem from './comment-item.vue'
// 防抖控制加载两次loading
// import {debounce} from 'lodash'
// 引入eventBus的on
// import { on } from '@/utils/eventBus'
export default {
  name: 'CommentList',
  mounted () {
    // on('onpost-success', (comment) => {
    //   this.list.unshift(comment)
    // })
  },
  props: {
    source: {
      type: [Number, String, Object],
      required: true
    },
    list: {
      list: Array,
      default: () => []
    },
    type: {
      type: String,
      validator (val) {
        return ['a', 'c'].includes(val)
      },
      default: 'a'
    }
  },
  components: {
    CommentItem
  },
  data () {
    return {
      // 修改list数组 用props接收
      // list: [],
      loading: false,
      finished: false,
      offset: null,
      limit: 20
    }
  },
  created () {
    this.loading = true
    this.onLoad()
  },

  methods: {
    async onLoad () {
      try {
        // 1. 请求获取数据
        const { data: { data }, data: { data: { results, last_id: offset } } } = await getComments({
          type: this.type, //  评论类型，a-对文章(article)的评论，c-对评论(comment)的回复
          source: this.source, // 源id，文章id或评论id
          offset: this.offset, // 获取评论数据的偏移量，值为评论id，表示从此id的数据向后取，不传表示从第一页开始读取数据
          limit: this.limit// 获取的评论数据个数，不传表示采用后端服务设定的默认每页数据量
        })

        // console.log(data)
        this.$emit('on-load', data)
        // 方式三
        this.list.push(...results) // 调用方法添加,避免修改地址指向
        // 写法一
        /*
        // 2. 将数据添加到列表中
        this.list.push(...results)

        // 把文章评论的总数量传递到外部

        // 3. 将 loading 设置为 false
        this.loading = false

        // 4. 判断是否还有数据
        if (results.length === 0) {
          // 没有就将 finished 设置结束
          this.finished = true
        } else {
          // 有就更新获取下一页的数据页码
          this.offset = offset
        }
        */
        //  写法二 集中写
        Object.assign(this, {
          // list: [...this.list, ...results], // 2. 将数据添加到列表中
          loading: false, //  3. 将 loading 设置为 false
          finished: results.length === 0, // 4. 判断是否还有数据
          offset // 有就更新获取下一页的数据页码
        })
      } catch (e) {

      }
    }
  },
  watch: {},
  computed: {}
}
</script>

<style lang="less" scoped>
</style>
